<template>
  <div
    :class="`it-popup ${className} ${mask ? 'popup-mask' : ''}`"
    @click.self="onClickMask"
  >
    <div class="popup-content" :style="positionStyle">
      <slot></slot>

      <div v-if="closeShow" class="close-icon" @click="handleClose"></div>
    </div>
  </div>
</template>

<script name="ItPopup" setup>
import { ref } from 'vue'
const props = defineProps({
  className: {
    type: String,
    default: '',
  },
  mask: {
    type: Boolean,
    default: true,
  },
  position: {
    type: Array,
    default: () => ['center', 'center'],
  },
  shadeClose: {
    type: Boolean,
    default: false,
  },
  closeShow: {
    type: Boolean,
    default: true,
  },
})
const getPosition = (position) => {
  const w = position[0],
    h = position[1]
  const value = {
    left: ['0%', '0%'],
    center: ['50%', '-50%'],
    right: ['100%', '-100%'],
    top: ['0%', '0%'],
    bottom: ['100%', '-100%'],
  }
  // eslint-disable-next-line max-len
  return `left:${value[w][0]};top:${value[h][0]}; transform: translate(${value[w][1]}, ${value[h][1]});`
}
let positionStyle = ref(getPosition(props.position))

const emit = defineEmits(['close'])
const onClickMask = () => {
  if (props.shadeClose) closeHandle()
}
const closeHandle = () => {
  emit('close')
}
const handleClose = () => {
  closeHandle()
}
</script>

<style scoped>
.it-popup {
  width: 100vw;
  height: 100vh;
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
}
.popup-mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
  position: absolute;
}

.close-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  background-image: url('./images/iconclose.png');
  background-size: 20px 20px;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 9999;
}
</style>
